<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="向下">
        <div class="triangle triangle1"></div>
      </el-tab-pane>
      <el-tab-pane label="向右">
        <div class="triangle triangle2"></div>
      </el-tab-pane>
      <el-tab-pane label="向下">
        <div class="triangle triangle3"></div>
      </el-tab-pane>
      <el-tab-pane label="向左">
        <div class="triangle triangle4"></div>
      </el-tab-pane>
      <el-tab-pane label="左上">
        <div class="triangle triangle5"></div>
      </el-tab-pane>
      <el-tab-pane label="右上">
        <div class="triangle triangle6"></div>
      </el-tab-pane>
      <el-tab-pane label="右下">
        <div class="triangle triangle7"></div>
      </el-tab-pane>
      <el-tab-pane label="左下">
        <div class="triangle triangle8"></div>
      </el-tab-pane>
    </el-tabs>
    <p>注意：</p>
    <p>transparent属性值表示透明</p>
    <p>需要先把内容的宽高都设置成0，然后给border设置 背景颜色和宽度 撑开盒子，原理是利用了border交界</p>
    <p>原理：border交界是会平分直角的</p>
    <p>1、当设置border-top宽度100，背景红色；border-left宽度100，背景绿色；就会得到一个以对角平分，左下绿色，
    右上红色的边长为100的正方形；这时只需要将其中一个border设置为透明，就能得到一个三角形</p>
    <div class="triangle triangle9"></div>
    <p>2、当设置border-top宽度100，背景红色；border-right宽度100，背景蓝色；就会得到一个以对角平分，左上红色，
    右下蓝色的边长为100的正方形；这时只需要将其中一个border设置为透明，就能得到一个三角形</p>
    <div class="triangle triangle10"></div>
    <p>3、当设置border-top宽度100，背景红色；border-left宽度100，背景绿色；border-right宽度100，背景蓝色；
    三颜色矩形正方形；这时只需要将其中两个个border设置为透明，就能得到一个三角形</p>
    <div class="triangle triangle11"></div>
  </div>
</template>

<script>

export default {
  name: 'Triangle', // 三角形
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>

<style scoped lang="scss">
@import '~@/styles/variables.scss';

.triangle {
  width: 0;
  height: 0;
}
/* transparent表示透明 */
.triangle1 {
  border-top: 100px solid $light-blue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}
.triangle2 {
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 100px solid $light-blue;
}
.triangle3 {
  border-right: 100px solid transparent;
  border-bottom: 100px solid $light-blue;
  border-left: 100px solid transparent;
}
.triangle4 {
  border-top: 100px solid transparent;
  border-right: 100px solid $light-blue;
  border-bottom: 100px solid transparent;
}
.triangle5 {
  border-top: 140px solid $light-blue;
  border-right: 140px solid transparent;
}
.triangle6 {
  border-top: 140px solid $light-blue;
  border-left: 140px solid transparent;
}
.triangle7 {
  border-bottom: 140px solid $light-blue;
  border-left: 140px solid transparent;
}
.triangle8 {
  border-bottom: 140px solid $light-blue;
  border-right: 140px solid transparent;
}
.triangle9 {
  border-top: 100px solid red;
  border-left: 100px solid green;
  // border-right: 100px solid blue;
  // border-bottom: 100px solid black;
}
.triangle10 {
  border-top: 100px solid red;
  border-right: 100px solid blue;
}
.triangle11 {
  border-top: 100px solid red;
  border-left: 100px solid green;
  border-right: 100px solid blue;
}
</style>
